<!--
 * @Author: gyp
 * @Date: 2020-05-08 12:44:26
 * @LastEditors: gyp
 * @LastEditTime: 2020-09-08 17:11:17
 * @Description: 大屏
 * @FilePath: \sy_kjxc_web\src\views\screen\index.vue
 -->
<template>
  <el-container class="container">
    <el-header class="headerWrap">“邵阳快警”综合管理系统</el-header>
    <el-container class="mainContainer">
      <el-aside class="leftWrap" v-if="!mapFullscreen">
        <comm-box
          :title="'快警平台信息(' + this.platformList.length + ')'"
          :customStyle="'lefttopBox'"
          @onTitleClick="onTitleClick"
        >
          <el-scrollbar slot="content" class="scrollBar">
            <police-list
              :data="platformList"
              @onPoliceOpen="onPoliceOpen"
              @onPlatformShow="onPlatformShow"
            />
          </el-scrollbar>
        </comm-box>
        <comm-box :title="'平台车辆'" :customStyle="'leftbotBox'" @onTitleClick="onTitleClick">
          <div class="carInput" slot="search">
            <el-input
              v-model="inputcarPatrol"
              icon="search"
              name="title"
              clearable
              size="mini"
              class="car_input_inner"
              placeholder="车牌号/平台车名"
              @keyup.enter.native="getCarPatrol"
              @clear="changeCarList()"
            >
              <el-button slot="prepend" @click="getCarPatrol" icon="el-icon-search" />
            </el-input>
          </div>
          <div slot="content" class="whAuto">
            <ul class="carNav">
              <li
                :class="{ active: index === curnavIndex }"
                v-for="(item, index) in carnavData"
                :key="index"
                @click="changeCarList(item.value)"
              >{{ item.name }}</li>
            </ul>
            <div class="seize40"></div>
            <el-scrollbar class="scrollBarM">
              <patrolcar-list
                :data="patrolcarList"
                :interStatus="interStatus"
                @monitorCar="monitorCar"
                @onCarTrack="onCarTrack"
                @onMarkerRight="onMarkerRight"
              />
            </el-scrollbar>
          </div>
        </comm-box>
      </el-aside>
      <el-main>
        <comm-box :customStyle="'headStatistic'" @onTitleClick="onTitleClick" v-if="!mapFullscreen">
          <ul slot="content" class="headstaWrap">
            <li
              class="staItem"
              v-for="(item, index) in headStaData"
              :key="index"
              @click="onStatopClick(item.title)"
            >
              <div class="staitem-icon">
                <svg-icon :icon-class="item.icon" />
              </div>
              <div class="staitem-content">
                <div :class="['staitem-name', 'staitem' + index]">{{ item.title }}</div>
                <div v-if="item.title === '平均处警时长'" class="staitem-num">{{ item.value }}</div>
                <count-to
                  v-else
                  class="staitem-num"
                  :startVal="0"
                  :endVal="item.value"
                  :duration="2000"
                />
              </div>
            </li>
          </ul>
        </comm-box>
        <div class="insideNet" v-if="interStatus === 'inside'">
          <div class="chartItem">
            <el-button class="backChart" size="mini" v-if="chartBackOne" @click="onChartBackOne">返回</el-button>
            <el-button class="backChart right" size="mini" v-if="chartBackOne" @click="onOnechartDown">下载</el-button>
            <div class="chart_item" ref="chartOne"></div>
          </div>
          <div class="chartItem">
            <el-button class="backChart" size="mini" v-if="chartBack !== 'first'" @click="onChartBack">返回</el-button>
            <el-button class="backChart right" size="mini" v-if="chartBack === 'third'" @click="onTwochartDown">下载</el-button>
            <div class="chart_item" ref="chartTwo"></div>
          </div>
        </div>
        <div :class="['outsideNet', { 'fullMap': mapFullscreen }]" v-else>
          <div class="layerButton" @click="layerboxVisible = true" v-if="!layerboxVisible">图层</div>
          <comm-box :customStyle="'layerWrap'" v-if="layerboxVisible">
            <div class="layerContainer" slot="content" @mouseleave="layerboxVisible = false">
              <div class="mapcItem">
                <span>地图全屏</span>
                <div>
                  <el-switch v-model="mapFullscreen" active-text="开启" />
                </div>
              </div>
              <div class="mapcItem">
                <span>显示内容</span>
                <div>
                  <el-switch
                    class="mr"
                    v-model="platformCar"
                    @change="getCurrentMarkers()"
                    active-text="平台车"
                  />
                  <el-switch
                    class="mr"
                    v-model="policeCar"
                    @change="getCurrentMarkers()"
                    active-text="警车"
                  />
                  <el-switch
                    class="mr mt"
                    v-model="motorcycle"
                    @change="getCurrentMarkers()"
                    active-text="摩托车"
                  />
                  <el-switch
                    class="mr mt"
                    v-model="jurisdiction"
                    @change="getJurisdiction()"
                    active-text="辖区"
                  />
                </div>
              </div>
              <div class="mapcItem">
                <span>车牌搜索</span>
                <div class="carInput">
                  <el-input
                    v-model="inputCar"
                    icon="search"
                    name="title"
                    clearable
                    size="mini"
                    class="car_input_inner"
                    placeholder="车牌号/平台车名"
                    @keyup.enter.native="getCarNoPanTo"
                    @clear="setFullmap"
                  >
                    <el-button slot="prepend" @click="getCarNoPanTo" icon="el-icon-search" />
                  </el-input>
                </div>
              </div>
            </div>
          </comm-box>
          <baidu-map
            class="map"
            :center="center"
            :zoom="zoom"
            :min-zoom="9"
            :max-zoom="20"
            :scroll-wheel-zoom="true"
            :continuous-zoom="true"
            :mapStyle="mapStyle"
            :map-click="false"
            @ready="handler"
            @moveend="queryInRect()"
            @zoomend="queryInRect()"
          >
            <!-- 网格图 -->
            <bm-polygon
              v-for="(polygon, index) of showPolygons"
              :key="index"
              :path="polygon.coordList"
              :stroke-color="'#ffffff'"
              :stroke-weight="2"
              :stroke-opacity="0.5"
              :stroke-style="'dashed'"
              :fill-color="'#ffffff'"
              :fill-opacity="0.2"
            />
            <!-- 网格名称 -->
            <bm-label
              v-for="(label, index) of showLabels"
              :key="label.name + index"
              :position="label.conrdinate"
              :content="label.name"
              :labelStyle="{
                color: '#ffffff',
                fontSize: '16px',
                fontFamily: '微软雅黑',
                fontWeight: 'bold',
                border: 'none',
                background: 'none'
              }"
            />
            <!-- 点位置 -->
            <!-- <template>
            <bml-marker-clusterer :averageCenter="true">
              <bm-marker
                v-for="marker of showMarkers"
                :position="{ lng: marker.lng, lat: marker.lat }"
                :key="marker.id"
                @click="onMarkerClick(marker)"
                :icon="{
                  url: marker.isLocked ? marker.iconLock : marker.icon,
                  size: { width: 40, height: 40 }
                }"
                :offset="{ width: 0, height: -40 }"
              >
                <bm-label
                  v-if="marker.carCode"
                  :content="marker.carCode"
                  :labelStyle="{
                    backgroundColor: 'yellow',
                    color: '#000',
                    fontSize: '17px',
                    fontFamily: '微软雅黑',
                    fontWeight: 'bold',
                    padding: '1px',
                    border: '0',
                    zIndex: '5'
                  }"
                  :offset="{ width: -30, height: -25 }"
                />
              </bm-marker>
            </bml-marker-clusterer>
            </template>-->
            <!-- <template> -->
            <bm-marker
              v-for="marker of showMarkers"
              :position="{ lng: marker.lng, lat: marker.lat }"
              :key="marker.id"
              @click="onMarkerClick(marker)"
              :icon="{
                  url: marker.isLocked ? marker.iconLock : marker.icon,
                  size: { width: 40, height: 40 }
                }"
              :offset="{ width: 0, height: -40 }"
            >
              <bm-label
                v-if="marker.carCode"
                :content="marker.carCode"
                :labelStyle="{
                    backgroundColor: 'yellow',
                    color: '#000',
                    fontSize: '17px',
                    fontFamily: '微软雅黑',
                    fontWeight: 'bold',
                    padding: '1px',
                    border: '0',
                    zIndex: '5'
                  }"
                :offset="{ width: -30, height: -25 }"
              />
            </bm-marker>
            <!-- </template> -->
          </baidu-map>
        </div>
        <comm-box :customStyle="'vedioBox'" v-show="showView">
          <div slot="content" class="videoWrap">
            <KedaVideo
              ref="Keda"
              :videoStyle="videoStyle"
              :videoTitle="videoName"
              :videoDevid="videoDevid"
              @close="videoClose"
            />
          </div>
        </comm-box>
      </el-main>
      <el-aside class="rightWrap" v-if="!mapFullscreen">
        <comm-box :title="'巡逻排名'" :customStyle="'righttopBox'" @onTitleClick="onTitleClick">
          <el-scrollbar slot="content" class="scrollBar">
            <patrolrank-list :data="patrolrankList" />
          </el-scrollbar>
        </comm-box>
        <comm-box :title="'实时警情'" :titleStyle="'orange'" :customStyle="'rightbotBox'">
          <el-scrollbar slot="content" class="scrollBar">
            <realtimealert-list :data="realtimeAlertList" />
          </el-scrollbar>
        </comm-box>
      </el-aside>
    </el-container>
    <police-dialog
      v-if="policeVisible"
      :platformId="platformId"
      :title="platformTitle"
      @onUserClick="onUserClick"
      @onPoliceClose="onPoliceClose"
    />
    <!-- <dutyleader-dialog
      v-if="dutyleaderVisible"
      @onUserClick="onUserClick"
      @onDutyleaderClose="onDutyleaderClose"
    /> -->
    <userdetail-dialog
      v-if="userdetailVisible"
      :userId="currentUserId"
      @onUserdetailClose="onUserdetailClose"
    />
    <policesituation-dialog v-if="situationVisible" @onSituationClose="onSituationClose" />
    <dealsituation-dialog v-if="dealsituaVisible" @onDealsituaClose="onDealsituaClose" />
    <realtimealertnum-dialog v-if="realtimealertnumVisible" @onRealtimealertClose="onRealtimealertClose" />
    <punch-dialog v-if="punchVisible" @onPunchClose="onPunchClose" />
    <datacheck-dialog v-if="datacheckVisible" @onDatacheckClose="onDatacheckClose" />
    <recordlist-dialog
      v-if="recordlistVisible"
      :userId="currentUserId"
      :userName="currentUserName"
      @onrecordlistClose="recordlistVisible = false"
    />
    <patroltask-dialog
      v-if="patroltaskVisible"
      :userId="currentUserId"
      :userName="currentUserName"
      @onPatroltaskClose="patroltaskVisible = false"
    />
    <maptrack-dialog
      v-if="maptrackVisible"
      :userId="currentUserId"
      :userName="currentUserName"
      :devId="currentDevId"
      :devType="currentDevType"
      :devName="currentDevName"
      @onMaptrackClose="maptrackVisible = false"
    />
  </el-container>
</template>

<script>
import CountTo from 'vue-count-to'; // 数字滚动
import commBox from '@/components/commBox'; // 公用容器
import policeList from './components/policeList'; // 快警平台信息
import patrolcarList from './components/patrolcarList'; // 巡逻车辆
import patrolrankList from './components/patrolrankList'; // 巡逻排名--列表
import realtimealertList from './components/realtimealertList'; // 实时警情
import policeDialog from './components/policeDialog'; // 快警平台信息--弹出框
// import dutyleaderDialog from './components/dutyleaderDialog'; // 大队值班领导--弹出框
import userdetailDialog from './components/userdetailDialog'; // 用户详情--弹出框
import policesituationDialog from './components/policesituationDialog'; // 当日警情数
import dealsituationDialog from './components/dealsituationDialog'; // 平均处警时长
import realtimealertnumDialog from './components/realtimealertnumDialog'; // 实时警情数
import punchDialog from './components/punchDialog'; // 实时考勤人员
import datacheckDialog from './components/datacheckDialog'; // 实时线路考勤
import recordlistDialog from './components/recordlistDialog'; // 打卡记录
import patroltaskDialog from './components/patroltaskDialog'; // 巡逻任务
import maptrackDialog from './components/maptrackDialog'; // 地图轨迹
import KedaVideo from '@/components/video/KedaVideo'; // 监控视频
import { BaiduMap, BmMarker, BmLabel, BmPolygon } from 'vue-baidu-map';
import basicScreen from './mixins.js';
export default {
  name: 'screen',
  components: {
    BaiduMap,
    BmMarker,
    BmLabel,
    BmPolygon,
    CountTo,
    commBox,
    policeList,
    patrolcarList,
    patrolrankList,
    realtimealertList,
    policeDialog,
    // dutyleaderDialog,
    userdetailDialog,
    policesituationDialog,
    dealsituationDialog,
    realtimealertnumDialog,
    punchDialog,
    datacheckDialog,
    recordlistDialog,
    patroltaskDialog,
    maptrackDialog,
    KedaVideo
  },
  mixins: [basicScreen],
  created () {
    this.compareLoginCode();
  },
  mounted () {
    if (this.interStatus === 'inside') {
      this.getPoliceCarInit();
      this.oneChartBar = this.$echarts.init(this.$refs.chartOne);
      this.twoChartBar = this.$echarts.init(this.$refs.chartTwo);
      this.getChartOne();
      this.getChartTwo();
    } else {
      this.initWebSocket();
      this.setTimer();
      /**
       * 播放监控视频
       * @param {String} devid 设备id
       * @param {String} videoTitle 车辆名称
       */
      window.tapclick = (devid, videoTitle) => {
        if (this.lastInfoBox) {
          this.lastInfoBox.close();
        }
        this.videoProps = this.viewUrlMap[devid];
        this.$refs.Keda.stopRealPlay();
        if (this.videoProps && this.videoProps.length) {
          this.showView = true;
          this.videoDevid = devid;
          this.videoName = videoTitle;
          this.$refs.Keda.play(this.videoProps);
        } else {
          this.showView = false;
          this.videoDevid = '';
          this.videoName = '';
          this.$message.info('此车辆暂无监控');
        }
      };
    }
    // 被动事件监听器
    let passiveSupported = false;
    try {
      let options = Object.defineProperty({}, 'passive', {
        get: function () {
          passiveSupported = true;
        }
      });
      window.addEventListener('test', null, options);
    } catch (err) {
      console.log(err);
    }
    function fn () {
      console.log('fn');
    }
    document.addEventListener(
      'mousewheel',
      fn,
      passiveSupported ? { passive: true } : false
    );
  },
  beforeDestroy () {
    clearInterval(this.timer);
    this.timer = null;
    clearInterval(this.carTnter);
    this.nowMarker = null;
    clearInterval(this.realtimeAlertInter);
    this.realtimeAlertInter = null;
  }
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
<style lang="less">
.anchorBL {
  display: none;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.scrollBar {
  height: 100%;
}
.scrollBarM {
  height: calc(100% - 40px);
}
</style>

<style lang="less">
.el-input-group__prepend {
  background-color: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 0.01rem solid #dcdfe6;
  padding: 0 15px;
  .el-button.el-button--default {
    padding: 15px !important;
  }
}
// 点信息弹出框窗口
.infoBox {
  > img {
    z-index: 1;
  }
}
.myInfobox {
  border: 1px solid #2c58a6;
  box-shadow: 0 0 1px #2c58a6;
  box-sizing: border-box;
  position: relative;
  width: 350px;
  height: 300px;
  background: #2c3e50;
  .border-common {
    width: 10px;
    height: 10px;
    position: absolute;
  }
  .top-left {
    .border-common();
    border-left: 2px solid #5ab1ef;
    border-top: 2px solid #5ab1ef;
    left: -1px;
    top: -1px;
  }

  .top-right {
    .border-common();
    border-right: 2px solid #5ab1ef;
    border-top: 2px solid #5ab1ef;
    right: -1px;
    top: -1px;
  }

  .bottom-left {
    .border-common();
    border-left: 2px solid #5ab1ef;
    border-bottom: 2px solid #5ab1ef;
    left: -1px;
    bottom: -1px;
  }

  .bottom-right {
    .border-common();
    border-right: 2px solid #5ab1ef;
    border-bottom: 2px solid #5ab1ef;
    right: -1px;
    bottom: -1px;
  }
  .top {
    display: flex;
    font-size: 16px;
    margin: 20px 5px 5px;
    padding: 0 5px;
    .pName {
      width: 35%;
      color: #5ab1ef;
    }
    .sName {
      text-align: right;
      width: 65%;
      color: #ffffff;
    }
  }
  .center {
    display: flex;
    font-size: 16px;
    margin: 5px;
    padding: 0 5px;
    .carName {
      width: 70%;
      color: #5ab1ef;
    }
    .leaderName {
      text-align: right;
      width: 30%;
      color: #ffffff;
    }
  }
}
</style>
